<template>
  <view class="contain">
    <view class="hot">
      <view class="text">
        <!-- <span class="new">最新</span>
        <span>动态</span> -->
        <image src="../../static/hot.png"></image>
      </view>
      <view class="textScroll">
        <u-notice-bar
          mode="vertical"
          :list="textList"
          font-size="24"
          padding="14rpx"
          :more-icon="true"
          type="none"
          @getMore="getMore"
          color="#FE542F"
          @click="toSeeDetail"
        ></u-notice-bar>
      </view>
    </view>
    <view class="nav">
      <u-grid :col="5" :border="false">
        <u-grid-item
          v-for="(item, index) in iconList"
          :key="index"
          @click="toRegistered(item)"
        >
          <image :src="item.icon"></image>
          <view class="grid-text">{{ item.text }}</view>
        </u-grid-item>
      </u-grid>
    </view>
    <pic @send="getValue" />
    <tools />
  </view>
</template>

<script>
import pic from "../pic/pic.vue";
import recommend from "../recommend/recommend.vue";
import banner from "../banner/banner.vue";
import tools from "../tools/tools.vue";

export default {
  props: {
    latestNews: {
      type: Array,
    },
    test: {
      type: String,
      default: "世界你好",
    },
    longitude: {
      type: String,
      default: "121.4336",
    },
    latitude: {
      type: String,
      default: "31.3390",
    },
  },

  components: {
    pic,
    tools,
    recommend,
    banner,
  },
  data() {
    return {
      textList: [],
      iconList: [
        {
          icon: "../../static/homeicon/01.png",
          url: "../../pageTwo/financialService/register/register",
          text: "企业注册",
          type: "page",
        },
        {
          icon: "../../static/homeicon/02.png",
          url: "../../pageTwo/financialService/keepAccount/keepAccount",
          text: "代理记账",
          type: "page",
        },
        {
          icon: "../../static/homeicon/03.png",
          url: "../../pageTwo/laborDispatch/index?tag=" + "csfw",
          text: "财税服务",
          type: "page",
        },
        {
          icon: "../../static/homeicon/04.png",
          url: "../../pageTwo/officeService/rentHouse/index",
          text: "园区服务",
          type: "address",
        },
        {
          icon: "../../static/homeicon/05.png",
          url: "../../pages/service/service",
          text: "全部服务",
          type: "tab",
        },
      ],
    };
  },
  mounted() {
    this.latestNews.forEach((item) => {
      this.textList.push(item.articleName);
    });
  },

  methods: {
    getMore() {
      uni.switchTab({
        url: "../../pages/active/active",
      });
    },
    toSeeDetail(i) {
      console.log(i);
      var id = this.latestNews[i].id;
      uni.navigateTo({
        url: "../../pageTwo/xiangqing/xiangqing?id=" + id,
      });
    },
    toRegistered(value) {
      if (value.type == "page") {
        uni.navigateTo({
          url: value.url,
        });
      } else if (value.type == "tab") {
        uni.switchTab({
          url: value.url,
        });
      } else {
        uni.navigateTo({
          url:
            "../../pageTwo/officeService/rentHouse/index?longitude=" +
            this.longitude +
            "&latitude=" +
            this.latitude,
        });
      }
    },

    getValue(res) {
      this.$emit("aa", res);
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  font-size: 28rpx;
  .hot {
    margin-top: 170rpx;
    display: flex;
    padding-left: 30rpx;
    .text {
      width: 90rpx;
      height: 65rpx;
      // padding-top: 6rpx;
      border-right: 1px solid #ccc;
      padding-left: 10rpx;
      // font-family: HuXiaoBo;
      // .new {
      // 	color:#FE542F;
      // 	font-size:14px;
      // }
      image {
        width: 65rpx;
        height: 65rpx;
      }
    }
    .textScroll {
      flex: 1;
      height: 64rpx;
      // /deep/ .u-notice-bar{
      // 	height: 64rpx;
      // 	flex-wrap: wrap!important;
      // }
    }
  }
  .nav {
    padding-left: 16rpx;
    padding-right: 16rpx;
    image {
      width: 56rpx;
      height: 56rpx;
    }
  }
}
.grid-text {
  font-size: 26rpx;
  margin-top: 20rpx;
  color: #333333;
}
</style>
